<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>无人点单、无人支付系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet" type="text/css" href="css/basic.css"/>

    <link rel="stylesheet" type="text/css" href="css/index.css"/>
<script>
    window.onload=function () {
        //按钮
         var navCate=document.getElementById("nav_cate");
         //分类
         var leftCate=document.getElementById("left_cate");
         //背景
         var bg=document.getElementById("bg");

         var flag=true;



        bg.onclick=navCate.onclick=function () {
             if(flag){
                 flag=false;
                 leftCate.style.transform='translate(0,0)';
                 bg.style.display='block';
             }else{
                  flag=true;
                 leftCate.style.transform='translate(-100%,0)';
                 bg.style.display='none';
             }

         }

    }
</script>

</head>
<body>
  <header class="index_header">
            <div class="hlist">
                   <img src="images/rexiao.png">
                    <p>热销榜</p>
            </div>
              <div class="hlist">
                  <img src="images/caidan.png">
                  <p>点过的菜</p>
              </div>
              <div class="hlist">
                  <img src="images/sousuo.png">
                  <p>搜你喜欢</p>
              </div>
  </header>


  <aside class="left_cate" id="left_cate">
      <ul>
          <li>精品美食</li>
          <li>精品小面</li>
          <li>饮料酒水</li>
          <li>新品推荐</li>
          <li>舌尖美食</li>
          <li>厨师长推荐</li>
      </ul>
      <div id="nav_cate" class="nav_cate">
          <img src="images/nav.png"/>
          <p>菜单</p>
      </div>
  </aside>

<div class="content">
    <div class="item">
        <h3 class="item_cate">皮蛋瘦肉粥</h3>
        <ul class="item_list">
            <li>
                <div class="inner">
                    <img src="images/1.jpg" />
                    <p class="title">大蒜腊肉</p>
                    <p class="price">¥26</p>
                </div>
            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/2.jpg" />
                    <p class="title">家乡扣肉</p>
                    <p class="price">¥26</p>
                </div>
            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/3.jpg" />
                    <p class="title">主打鸡</p>
                    <p class="price">¥26</p>
                </div>
            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/2.jpg" />
                    <p class="title">酸辣土豆丝</p>
                    <p class="price">¥26</p>
                </div>
            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/3.jpg" />
                    <p class="title">家乡腊肉</p>
                    <p class="price">¥26</p>
                </div>
            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/2.jpg" />
                    <p class="title">长沙臭豆腐</p>
                    <p class="price">¥26</p>
                </div>
            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/3.jpg" />
                    <p class="title">主打鸡</p>
                    <p class="price">¥26</p>
                </div>
            </li>

        </ul>

    </div>
    <div class="item">

        <h3 class="item_cate">皮蛋瘦肉粥</h3>

        <ul class="item_list">
            <li>
                <div class="inner">
                    <img src="images/1.jpg" />
                    <p class="title">大蒜腊肉</p>
                    <p class="price">¥26</p>
                </div>
            </li>

            <li>
                <div class="inner">
                    <img class="item_img" src="images/2.jpg" />

                    <p class="title">家乡扣肉</p>

                    <p class="price">¥26</p>
                </div>

            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/3.jpg" />

                    <p class="title">主打鸡</p>

                    <p class="price">¥26</p>
                </div>
            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/2.jpg" />

                    <p class="title">酸辣土豆丝</p>

                    <p class="price">¥26</p>
                </div>

            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/3.jpg" />

                    <p class="title">家乡腊肉</p>

                    <p class="price">¥26</p>
                </div>
            </li>

            <li>
                <div class="inner">
                    <img class="item_img" src="images/2.jpg" />

                    <p class="title">长沙臭豆腐</p>

                    <p class="price">¥26</p>
                </div>

            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/3.jpg" />

                    <p class="title">主打鸡</p>

                    <p class="price">¥26</p>
                </div>
            </li>

        </ul>

    </div>
    <div class="item">
        <h3 class="item_cate">皮蛋瘦肉粥</h3>
        <ul class="item_list">
            <li>
                <div class="inner">
                    <img src="images/1.jpg" />
                    <p class="title">大蒜腊肉</p>
                    <p class="price">¥26</p>
                </div>
            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/2.jpg" />
                    <p class="title">家乡扣肉</p>
                    <p class="price">¥26</p>
                </div>
            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/3.jpg" />
                    <p class="title">主打鸡</p>
                    <p class="price">¥26</p>
                </div>
            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/2.jpg" />

                    <p class="title">酸辣土豆丝</p>

                    <p class="price">¥26</p>
                </div>

            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/3.jpg" />

                    <p class="title">家乡腊肉</p>

                    <p class="price">¥26</p>
                </div>
            </li>

            <li>
                <div class="inner">
                    <img class="item_img" src="images/2.jpg" />

                    <p class="title">长沙臭豆腐</p>

                    <p class="price">¥26</p>
                </div>

            </li>
            <li>
                <div class="inner">
                    <img class="item_img" src="images/3.jpg" />

                    <p class="title">主打鸡</p>

                    <p class="price">¥26</p>
                </div>
            </li>

        </ul>

    </div>

    <!--背景 背景也可以通过body的after伪类-->
    <div class="bg" id="bg"></div>



    <div id="footer_nav" class="footer_nav">
        <img src="images/navigation.png">
        <p>导航</p>
    </div>

    <div class="footer_nav_show">
        <ul class="list">
            <li>
                <img src="images/menu.png"/>
                <p>菜单</p>
            </li>

            <li>
                <img src="images/cart.png"/>
                <p>购物车</p>
            </li>
            <li>
                <img src="images/order.png"/>
                <p>我的订单</p>
            </li>
            <li>
                <img src="images/wallet.png"/>
                <p>结账</p>
            </li>
            <li>
                <img src="images/close.png"/>
                <p>返回</p>
            </li>
        </ul>
    </div>


     <div id="footer_cart" class="footer_cart">
           <img src="images/cart.png">
           <p>购物车</p>
     </div>
</div>

</body>
</html>
